<template>
	<div class="app-container">
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" icon="el-icon-plus" @click="openAddGoodsTypeDialog(1)">新增商品类型</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button icon="el-icon-delete" @click="handleDelete">删除</el-button>
			</el-col>
		</el-row>
		
		<el-table @selection-change="handleSelectionChange" v-loading="loading" :data="goodsTypeList" :cell-style="cellStyle" ref="singleTable" highlight-current-row @current-change="handleCurrentChange">
			<el-table-column type="selection" width="50" align="center" />
			<el-table-column label="名称" prop="name" width="100" />
			<el-table-column label="图片" prop="pictureUrl" width="100">
				<template slot-scope="scope">
					<el-image
						style="width: 80px; height: 80px"
						:src="baseUrl + scope.row.pictureUrl"
						:preview-src-list="[baseUrl + scope.row.pictureUrl]"
						fit="scale-down"></el-image>
				</template>
			</el-table-column>	
			<el-table-column label="排序" prop="sort" width="100" />
			<el-table-column label="操作" align="center" width="200">
				<template slot-scope="scope">
					<el-button
					  size="mini"
					  type="text"
					  icon="el-icon-edit"
					  @click="openUpdateGoodsTypeDialog(scope.row, 1)"
					  v-hasPermi="['system:role:edit']"
					>修改</el-button>
					<el-button
					  size="mini"
					  type="text"
					  icon="el-icon-delete"
					  @click="handleDelete(scope.row)"
					  v-hasPermi="['system:role:remove']"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination
		  v-show="total > 0"
		  :total="total"
		  :page.sync="queryParams.pageNum"
		  :limit.sync="queryParams.pageSize"
		  @pagination="handleQueryGoodsTypeByPage"
		/>
		
		<el-dialog :title="dialogTitle" :visible.sync="dialogShow" width="500px" append-to-body>
			<el-form :model="form" label-width="100px">
				<el-form-item v-if="isAddOneLevel == 2" label="商品类型">
					<el-select v-model="form.goodsTypeId">
						<el-option v-for="(item, index) in goodsTypeList" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="名称">
					<el-input v-model="form.name" />
				</el-form-item>
				<el-form-item prop="url">
					<template>
						<!-- <pictureAvatar :img="pictureAvatarImg" @getVal="getVal" /> -->
						<ImageUpload :limit="1" :value="form.pictureUrl" @input="handleGetPictureUrl"></ImageUpload>
					</template>
				</el-form-item>
				<el-form-item label="排序">
					<el-input v-model="form.sort" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitBrand">确 定</el-button>
				<el-button @click="dialogShow = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	// import pictureAvatar from "@/components/pictureAvatar";
	import { queryGoodsTypeByPage, getGoodsTypePersonList, insertGoodsType, insertGoodsTypePerson, updateGoodsType, updateGoodsTypePerson, delGoodsTypeByIds, delGoodsTypePersonByIds } from "@/api/goods/goodsType";
	export default {
		components: {
			// pictureAvatar
		},
		data() {
			return {
				baseUrl: process.env.VUE_APP_BASE_API,
				dialogShow: false,
				dialogTitle: "编辑商品类型",
				form: {
					goodsTypeId: null,
					name: "",
					pictureUrl: "",
					sort: null,
				},
				file: null,
				filename: "",
				isAddOneLevel: 1,
				isAdd: true,
				goodsTypeList: [],
				total: 0,
				dateRange: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				goodsTypePersonList: [],
				personTotal: 0,
				personQueryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				currentRow: null,
				loading: true,
				loading2: true,
				pictureAvatarImg: "",
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				personIds: [],
				baseUrl: process.env.VUE_APP_BASE_API,
			}
		},
		mounted() {
			let that = this
			that.handleQueryGoodsTypeByPage()
		},	
		methods: {
			// 多选框选中数据
			handleSelectionChange(selection) {
				let that = this
				that.ids = selection.map(item => item.id);
				that.single = selection.length != 1;
				that.multiple = !selection.length;
			},
			handlePersonSelectionChange(selection) {
				let that = this
				that.personIds = selection.map(item => item.id);
			},
			getVal(file, filename) {
				let that = this
				that.file = file
				that.filename = filename
			},
			cellStyle() {
				return "cursor: pointer;"
			},
			setCurrent(row) {
				let that = this
				that.$refs.singleTable.setCurrentRow(row);
			},
			handleCurrentChange(res) {
				let that = this
				that.currentRow = res;
				that.queryParams.pageNum = 1
				// that.handleGetGoodsTypePersonList(res.id)
			},
			handleQueryGoodsTypeByPage() {
				let that = this
				that.loading = true
				queryGoodsTypeByPage().then(res => {
					that.loading = false
					let goodsTypeList = res.rows
					that.goodsTypeList = goodsTypeList
					that.total = res.total
					if(goodsTypeList.length > 0) {
						let goodsType = goodsTypeList[0]
						that.setCurrent(goodsType)
					} else {
						that.loading2 = false
					}
				}).catch((e) => {
					console.log(e)
				});
			},
			handleGetGoodsTypePersonList(goodsTypeId) {
				let that = this
				that.loading2 = true
				let param = {
					goodsTypeId: goodsTypeId
				}
				getGoodsTypePersonList(param).then(res => {
					that.loading2 = false
					that.goodsTypePersonList = res.rows
					that.personTotal = res.total
				}).catch((e) => {
					console.log(e)
				});
			},
			// 打开新增弹框
			openAddGoodsTypeDialog(res) {
				let that = this
				that.dialogTitle = "新增一级商品类型"
				let form = {
					goodsTypeId: null,
					name: "",
					pictureUrl: "",
					sort: null,
				}
				if(res == 2) {
					that.dialogTitle = "新增二级商品类型"
					form.goodsTypeId = that.currentRow != null?that.currentRow.id:null
				}
				that.form = form
				that.isAddOneLevel = res
				that.file = null
				that.filename = ""
				that.isAdd = true
				that.dialogShow = true
				that.$nextTick(() =>{
					that.pictureAvatarImg = ""
				})
			},
			// 打开修改弹框
			openUpdateGoodsTypeDialog(res, isAddOneLevel) {
				let that = this
				that.isAddOneLevel = isAddOneLevel
				let currentRow = JSON.parse(JSON.stringify(res))
				let form = res
				form.pictureUrl = that.baseUrl + res.pictureUrl
				that.form = form
				// that.form = currentRow
				// that.file = null
				// that.filename = ""
				that.isAdd = false
				that.dialogTitle = "编辑商品类型"
				that.dialogShow = true
				that.$nextTick(() =>{
					that.pictureAvatarImg = currentRow.pictureUrl
				})
			},
			submitBrand() {
				let that = this
				// var formData = new FormData();
				// formData.append("avatarfile", that.file, that.filename);
				// formData.append("name", that.form.name);
				// formData.append("sort", that.form.sort);
				let form = that.form
				if(that.isAdd) {
					if(that.isAddOneLevel == 1) {
						insertGoodsType(form).then(res => {
							that.dialogShow = false
							that.handleQueryGoodsTypeByPage()
						}).catch((e) => {
							console.log(e)
						});
					} else {
						// formData.append("goodsTypeId", that.form.goodsTypeId);
						insertGoodsTypePerson(form).then(res => {
							that.dialogShow = false
							that.handleGetGoodsTypePersonList(that.currentRow.id)
						}).catch((e) => {
							console.log(e)
						});
					}
				} else {
					// formData.append("id", that.form.id);
					if(that.isAddOneLevel == 1) {
						updateGoodsType(form).then(res => {
							that.dialogShow = false
							that.handleQueryGoodsTypeByPage()
						}).catch((e) => {
							console.log(e)
						});
					} else {
						// formData.append("goodsTypeId", that.form.goodsTypeId);
						updateGoodsTypePerson(form).then(res => {
							that.dialogShow = false
							that.handleGetGoodsTypePersonList(that.currentRow.id)
						}).catch((e) => {
							console.log(e)
						});
					}	
				}	
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				let that = this
				const ids = row.id || that.ids;
				that.$modal.confirm("是否确认删除你选择的商品类型吗？").then(function() {
					delGoodsTypeByIds(ids).then(res => {
						that.$modal.msgSuccess("删除成功");
						that.dialogShow = false
						that.handleQueryGoodsTypeByPage(that.currentRow.id)
					}).catch((e) => {
						console.log(e)
					});
				}).catch(() => {
					console.log("删除失败")
					that.$modal.msgSuccess("删除失败");
				});
			},
			handleDeletePerson(row) {
				let that = this
				const ids = row.id || that.personIds;
				that.$modal.confirm("是否确认删除你选择的商品类型吗？").then(function() {
					delGoodsTypePersonByIds(ids).then(res => {
						that.$modal.msgSuccess("删除成功")
						that.dialogShow = false
						that.handleGetGoodsTypePersonList(that.currentRow.id)
					}).catch((e) => {
						console.log(e)
					});
				}).catch(() => {
					console.log("删除失败")
					that.$modal.msgSuccess("删除失败");
				});
			},
			handleGetPictureUrl(res){
				let that = this
				that.form.pictureUrl = res
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-box{
		// height: 100vh;
		display: flex;
		// background-color: #f6f6f6;
		padding-top: 20px;
		.left-box {
			padding-left: 26px;
			width: 35%;
		}
		.right-box {
			flex: 1;
			padding-left: 20px;
		}
	}
</style>